<template>
  <div class="empty-state">
    <div class="empty-state__illustration">
      <slot name="icon">
        <svg
          width="120"
          height="120"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
            stroke="#94A3B8"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </slot>
    </div>
    <h3 class="empty-state__title">{{ title }}</h3>
    <p class="empty-state__description">{{ description }}</p>
    <slot name="action">
      <button v-if="buttonText" class="empty-state__button" @click="onButtonClick">
        {{ buttonText }}
      </button>
    </slot>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps<{
  title: string
  description: string
  buttonText?: string
}>()

const emit = defineEmits<{
  (e: 'buttonClick'): void
}>()

const onButtonClick = () => {
  emit('buttonClick')
}
</script>

<style scoped>
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #718096;
}

.empty-state__illustration {
  margin-bottom: 24px;
  opacity: 0.6;
}

.empty-state__title {
  font-size: 18px;
  font-weight: 600;
  color: #4a5568;
  margin: 0 0 8px 0;
}

.empty-state__description {
  font-size: 15px;
  line-height: 1.6;
  color: #718096;
  margin: 0 0 24px 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.empty-state__button {
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.empty-state__button:hover {
  background: #5a6fd8;
}

/* 移动端样式 */
@media (max-width: 968px) {
  .empty-state {
    padding: 40px 16px;
  }

  .empty-state__illustration svg {
    width: 80px;
    height: 80px;
  }

  .empty-state__title {
    font-size: 16px;
  }

  .empty-state__description {
    font-size: 14px;
  }
}
</style>
